<template>
    <div class="menu-container">
        <!--菜单分配  -->
        <el-row style="height: 95%;">
            <el-col :span="10" style="padding-right: 16px;height: 100%;">
                <div id="menu-content" style="text-align: right;">
                    <el-scrollbar
                        wrap-class="side-bar-scrollbar-wrap"
                        view-class="side-bar-scrollbar-view"
                        class="elTree_wrap"
                    >
                        <el-tree
                            :data="menuList"
                            default-expand-all
                            node-key="id"
                            ref="tree"
                            highlight-current
                            show-checkbox
                            :check-on-click-node="true"
                            :expand-on-click-node="false"
                            :props="defaultPropsTree"
                        ></el-tree>
                    </el-scrollbar>
                </div>
            </el-col>
            <el-col :span="2" style="line-height: 700px;">
                <el-button type="primary" size="small" @click="grantMenus">移动到>>></el-button>
            </el-col>
            <el-col :span="12" id="grid-contentbylessee" style="padding-left: 16px;height: 100%;">
                <el-form :inline="true" :model="formData" class="demo-form-inline">
                    <el-form-item label-position="left" label="请选择银行号:">
                        <el-select
                            v-model="formData.lesseeId"
                            placeholder="请选择所属租户"
                            clearable
                            style="width: 200px;"
                        >
                            <el-option
                                v-for="item in selectList"
                                :key="item.lesseeCode"
                                :label="item.lesseeName"
                                :value="item.lesseeCode"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button
                        type="primary"
                        size="small"
                        @click="getMenuByLessee"
                        icon="el-icon-circle-check"
                    >确定</el-button>
                </el-form>
                <el-scrollbar wrap-class="side-bar-scrollbar-wrap" class="noBack">
                    <el-tree
                        :data="menuListByLessee"
                        default-expand-all
                        node-key="id"
                        ref="treeByLessee"
                        highlight-current
                        show-checkbox
                        :check-on-click-node="true"
                        :expand-on-click-node="false"
                        :props="defaultPropsTreeByLessee"
                    ></el-tree>
                </el-scrollbar>
            </el-col>
        </el-row>
    </div>
</template>

<script>

export default {
    name: 'menuAssignment',
    data() {
        return {
            menuList: [],
            menuListByLessee: [],
            formData: {
                lesseeId: '',
            },
            selectList: [],
            defaultPropsTree: {
                label: 'menuName',
                children: 'child',
            },
            defaultPropsTreeByLessee: {
                label: 'menuName',
                children: 'child',
            },
        };
    },
    created() {
        // this.getLesscode();
        this.getMenu();
    },
    methods: {
        // getLesscode() {
        //     this.$post.Lessee.searchList()
        //         .then((res) => {
        //             this.selectList = res.data.content;
        //             this.formData.lesseeId = res.data.content.length ? res.data.content[0].lesseeCode : '';
        //         });
        // },
        getMenu() {
            this.$post.nebulaApi.searchTemplateMenus({ lesseeCode: 'cupd', menuName: '模板菜单' }).then((res) => {
                this.menuList = res.data.content.child;
            }, (err) => {
                this.$message.error(err);
            });
        },
        getMenuByLessee() {
            if (!this.formData.lesseeId) {
                this.$message.warning('请选择银行号！');
                return;
            }
            this.$post.nebulaApi.setMenuListInfo({ lesseeCode: this.formData.lesseeId }).then((res) => {
                this.menuListByLessee = res.data.content;
            }, (err) => {
                this.$message.error(err);
            });
        },
        // 菜单分配
        grantMenus() {
            let params = this.$refs.tree.getCheckedNodes().concat(...this.$refs.tree.getHalfCheckedNodes());
            params.forEach((item) => {
                item.lesseeCode = this.formData.lesseeId;
            })
            this.$post.nebulaApi.grantMenus(params).then((res) => {
                if (res.data.success) {
                    this.$message.success('分配成功！');
                    this.$refs.tree.setCheckedKeys([]);
                    this.getMenuByLessee();
                } else {
                    this.$message.error(res.data.msg);
                }
            }, (err) => {
                console.log(err);
                this.$message.error('菜单分配接口错误！');
            });
        },
    },
};
</script>

<style lang='scss'>
.menu-container,
.el-col-8,
.bg-purple-dark,
.el-scrollbar {
    height: 100%;
}
.app-main-container .app-main {
    // background: #fff;
    .menu-container {
        background: #fff;
        padding: 20px;
        .el-scrollbar,
        .el-tree {
            height: 100%;
        }
        .noBack {
            height: calc(100% - 62px);
        }
    }
    .bg-purple-dark > div {
        height: 100%;
    }
    .el-tree-node__content:hover {
        background-color: #ecf5ff !important;
    }
}
#menu-content /deep/ .side-bar-scrollbar-wrap {
    max-height: 740px;
    min-height: 740px;
}
#grid-contentbylessee /deep/ .side-bar-scrollbar-wrap {
    max-height: 677px;
    min-height: 677px;
}
.menu-container,
.el-col-8,
.bg-purple-dark,
.el-scrollbar {
    height: 100%;
}
.bg-purple-dark > div {
    height: 100%;
}
.el-tree-node__content:hover {
    background-color: #ecf5ff !important;
}
.menuIcon {
    position: absolute;
    right: 6%;
    display: none;
    background: #f5f7fa;
    i {
        color: #409eff;
        font-size: 16px;
    }
    .el-icon-edit {
        margin: 0 4px;
    }
}
.el-tree-node__content:hover .menuIcon {
    display: inline-block;
}
</style>
